import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { Card, Col, List, Row } from 'antd'
import _ from 'lodash'

export default function News() {
  const [list, setlist] = useState([])
  useEffect(() => {
    axios.get('/news?publishState=2&_expand=category').then((res) => {
      setlist(
        Object.entries(_.groupBy(res.data, (item) => item.category.title)),
      )
    })
  }, [])

  const divPadding = {
    padding: '25px 40px',
  }
  return (
    <div style={divPadding}>
      <h2>全球大新闻</h2>
      <Row gutter={16}>
        {list.map((item) => (
          <Col span={8} key={item[0]}>
            <Card title={item[0]} bordered={true} hoverable={true}>
              <List
                size="small"
                dataSource={item[1]}
                pagination={{ pageSize: 5 }}
                renderItem={(data) => (
                  <List.Item>
                    <a href={`/detail/${data.id}`}>{data.title}</a>
                  </List.Item>
                )}
              />
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  )
}
